<template>
  <div style="">
      <!-- <van-nav-bar
 class="dingbu"
  title="我的钱包"
  left-arrow
  @click-left="$router.back()"
/> -->
<my-header title="我的钱包" @onClickLeft="$router.push('/my')"/>
<div class="yue">
  <div class="qian">
  <h4>账户余额</h4>
  <h3>58.00</h3><p>元</p>
  </div>
  <button>提现</button>
</div>
<van-row type="flex" justify="center">
  <van-col span="8" class="mingxi" :class='ding'  @click="dingdan()">订单明细</van-col>
  <van-col span="8" class="mingxi" :class='yong' @click="yongjin()">佣金明细</van-col>
</van-row>
<!-- 订单明细 -->
  <div v-if="switching">
     <div class="xiang-qing">
   <p>2020-02-21 21:29:32</p>
   <p>订单退款 - - -- - - -- - -- -  <span>￥ 58</span> </p>
    </div>
    <div class="xiang-qing">
   <p>2020-02-21 21:29:32</p>
   <p>订单退款 - - -- - - -- - -- -  <span>￥ 58</span> </p>
    </div>
  </div>
  <!-- //佣金明细 -->
  <div v-else>
  <div class="xiang-qing">
   <p>2020-02-21 21:29:32</p>
   <p>邀请开店佣金 - - -- - - -- - -- -  <span>￥ 58</span> </p>
  </div>
  <div class="xiang-qing">
   <p>2020-02-21 21:29:32</p>
   <p>邀请开店佣金 - - -- - - -- - -- -  <span>￥ 58</span> </p>
  </div>
  </div>
  </div>
</template>

<script>
import MyHeader from '../components/my-header.vue'
// import { mapState } from 'vuex'
// var b1 = this.$refs.ding
// var b2 = this.$refs.yong
// console.log(b1, b2)
export default {
  name: '',
  components: {
    MyHeader
  },
  props: {},
  data () {
    return {
      switching: true,
      ding: 'lanse',
      yong: ''
    }
  },
  computed: {},
  watch: {},
  created () {
    this.dingdan()
  },
  mounted () {

  },
  methods: {
    dingdan () {
      this.switching = true
      this.ding = 'lanse'
      this.yong = ''
    },
    yongjin () {
      this.switching = false
      this.ding = ''
      this.yong = 'lanse'
    }
  }
}
</script>

<style scoped lang="less">
.dingbu{
    border-bottom: 4px solid #555;
}
 /deep/ .van-icon-arrow-left::before {
    font-size: 40px;
    font-weight: 700;
    color: #333 ;
  }
  .yue{
    overflow: hidden;
    border-bottom: 4px solid #555;
    background: #02b6fd;
    color: #fff;
    .qian{
      float: left;
      p{
        font-size: 32px;
        margin-top: 60px;
      }
      H3 {
        color: #f00000;
      }
    }
    button{
      float: right;
      margin: 50px 30px;
      padding: 20px 50px;
      border-radius: 10px;
      font-size: 32px;
      color: #111;
      background: #FFF;
      border: 1px solid #333;
    }
h4{
   margin:20px 40px;
}
h3{
  margin:20px 40px;
  float: left;
}
  }
  .mingxi{
  margin-top: 20px;
  padding:20px 60px;
  font-size: 28px;
  border: 1px solid #333;
  }
  .xiang-qing{
    font-size: 28px;
    margin: 50px;
    p{
      margin: 20px;
      span{
        color: #0e8d0d;
      }
    }
  }
  .lanse{
    background-color: #02b6fd;
  }
</style>
